<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">

          <el-form-item label="顾客姓名：">
            <el-input v-model="listQuery.userName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>

          <el-form-item label="联系电话：">
            <el-input v-model="listQuery.outcomePhone"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>


        </div>
        <div class="right-box">
<!--          <el-button size="mini" type="success"-->
<!--                     @click="handleCreate">新增-->
<!--          </el-button>-->

          <el-button size="mini"
                     @click="handleFilter">查询
          </el-button>
          <el-button size="mini" type="info"
                     @click="reset">重置
          </el-button>
        </div>
      </template>
    </search-box>



  <div style="width: 100%;height: 50px;background-color: #ffffff;line-height: 50px;color: #666666;">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尚未处理预约的人数剩余<span style="color: red">{{num}}</span>人
  </div>
    <div >

      <div v-for='(row,index) in sliceList(list, 7)' style="width: 100%;">

       <div style=
              "width: 100%;margin-top: 20px;display: flex;flex-direction: row">

         <div v-for="(item,i) in row" :key="i" style="width: 12%;margin-left: 1.5%;height: 200px;border: #ac6c87;	border-radius: 10px;
		            border: 1px solid #DCDCDC;height: 250px;background-color: #ffffff;">
           <div style="width: 100%;text-align: left;padding: 20px;color: #666666;font-size: 14px" >
             <strong>顾客姓名：</strong><u>{{item.userName}}</u><br><br>
             <strong>电话：</strong><u>{{item.outcomePhone}}</u><br><br>
             <strong>预约日期：</strong><u>{{item.dayTime}}</u><br><br>
             <strong>预约时间：</strong><u>{{item.startTime.substring(10,20)}}</u><br><br>
             <strong>预约医师：</strong><u>{{item.physicianName}}</u><br><br>
             <strong>预约号码：</strong><u>{{item.receptionNumber}}</u><br>
           </div>
           <div style="text-align: center" v-if="item.receptionOutcome==0">
             <el-button type="success" size="mini" @click="receptionPass(item)" >通过</el-button>
             <el-button type="info" size="mini"  @click="receptionNoPass(item)">驳回</el-button>
           </div>
           <div style="text-align: center" v-if="item.receptionOutcome==1">
              <span style="color: green;font-size: 13px">
                <strong>已通过</strong>
              </span>
           </div>

           <div style="text-align: center" v-if="item.receptionOutcome==2">
              <span style="color: #999999;font-size: 13px">
                <strong>已驳回</strong><br>
                <strong>驳回原因：</strong><u>{{item.causeFailure}}</u>
              </span>
           </div>
         </div>

       </div>


      </div>

    </div>




    <el-dialog
      title="驳回原因"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">


      <el-form ref="form" :model="form" :rules = 'rules'  label-width="120px">
        <el-form-item label="驳回原因" prop="causeFailure">
          <el-input v-model="form.causeFailure"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>

          <el-button type="info" @click="dialogVisible=false">提交</el-button>
        </el-form-item>
      </el-form>


    </el-dialog>




  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { quillEditor } from 'vue-quill-editor'//添加富文本编辑器
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination/index' // secondary package based on el-pagination
  // 当然你也可以为了方便使用，将它注册到全局
  import bus from '@/utils/eventBus'
  import searchBox from '@/components/searchBox.vue'
  import * as reception from '@/api/reception/reception'


  export default {
    name: 'AdminUser',
    components: { Pagination, searchBox, quillEditor },
    directives: { waves },
    filters: {},
    data() {
      return {
        content: '',
        editorOption: {},
        list: null,
        areaList: null,
        total: 0,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          pageSize: 50,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: []
        },
        dialogVisible: false,
        dialogVisibleDesc: false,
        dialogTitle:'',
        form:{
          minPrice: '',
          maxPrice: '',
          memberPrivilege:'',
        },
        num:0,
        rules: {
          causeFailure: [{ required: true, message: '驳回原因必填', trigger: 'blur' }],
        }
      }
    },
    computed: {
      ...mapGetters([
        'selectedTenantId',
        'tenantList'
      ]),
      sliceList() {
        return function (data,count) {
          if (data != undefined) {
            let index = 0;
            let arrTemp = [];
            for (let i = 0; i < data.length; i++) {
              index = parseInt(i / count);
              if (arrTemp.length <= index) {
                arrTemp.push([]);
              }
              arrTemp[index].push(data[i])
            }
            return arrTemp
          }
        }
      }
    },



    created() {

      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.getList()

      // 监听 租户改变的事件,选择不同租户后,立马刷新数据
      bus.$on('selectedTenantIdChanged', () => {
        console.log('selectedTenantIdChanged事件触发...')
        this.getList()
      })
    },
    mounted() {

    },
    beforeDestroy() { // 当路由切换到其他页面时触发
      bus.$off('selectedTenantIdChanged')
    },
    methods: { //所有的方法写在当前钩子函数下

      onEditorReady(editor) {
      },

      async getList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        const { content } = await reception.getReceptionListByDay(this.listQuery)
        this.list = content
        for(let i=0;i<this.list.length;i++){
          if(this.list[i].receptionOutcome==0){
            this.num+=1;
          }
        }
      },

      handleFilter() {
        this.listQuery.pageNumber = 1
        this.getList()
      },

      //新增数据
      handleCreate() {
        this.dialogVisible = true
        this.dialogTitle='新增'
      },
      //编辑数据
      handleUpdate(row) {

        this.dialogVisible = true
        this.dialogTitle='编辑';
        this.form = row;

      },
      //删除数据
      handleDelete(row) {

        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          reception.deleteReception(row).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
        })
      },




      receptionPass(row){
        this.$confirm('是否确认通过，通过之后，预约信息将推送给医师?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          reception.receptionPass(row).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '审核处理成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })

        }).catch(() => {
        })
      },

      receptionNoPass(row){
        this.dialogVisible = true;
        this.form=row;
      },



      handleClose(done) {
        this.dialogVisible = false;
      }
      ,

        handleLookProInfo(row){
        this.dialogVisibleDesc = true;
        this.proInfo = row;
      },


      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },

      //页面表单提交
      onSubmit(){
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.selectedTenantId
              reception.receptionNoPass(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '操作成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.dialogVisible = false
                  this.getList()

                }
              })

            }
        })


      },
      cancel(){
        this.dialogVisible = false;
        this.form = {};
      },
      reset() {
        this.listQuery = {}
        this.getList()
      }
    }
  }
</script>

<style scoped>
  .app-select {
    margin-bottom: 20px;
  }
</style>
